import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { Play, Pause, Download, Share2, Heart, Volume2, Settings, Wand2, Music, Mic, Upload } from 'lucide-react'
import { 
  JingMaskDecoration, 
  CloudDecoration, 
  WaveDecoration, 
  PlumDecoration,
  GuochaoBorder,
  TraditionalOrnament,
  OperaContainer,
  GuochaoIcon,
  TraditionalLine
} from '../components/OperaPatterns'
import { 
  OperaCharacter, 
  OperaBackground,
  OperaCharacterLine 
} from '../components/OperaCharacter'

const AIJingGePage = () => {
  const [isGenerating, setIsGenerating] = useState(false)
  const [isPlaying, setIsPlaying] = useState(false)
  const [selectedStyle, setSelectedStyle] = useState('traditional')
  const [selectedMood, setSelectedMood] = useState('melancholy')
  const [selectedInstrument, setSelectedInstrument] = useState('pipa')
  const [userInput, setUserInput] = useState('')

  const styles = [
    { id: 'traditional', name: '传统京剧', description: '保持经典京剧韵味', color: 'from-jing-red to-jing-gold' },
    { id: 'modern', name: '现代融合', description: '融入流行音乐元素', color: 'from-jing-purple to-jing-pink' },
    { id: 'electronic', name: '电子国风', description: '结合电子音乐风格', color: 'from-jing-blue to-jing-purple' },
    { id: 'rock', name: '摇滚京剧', description: '京剧与摇滚的碰撞', color: 'from-red-600 to-orange-500' }
  ]

  const moods = [
    { id: 'melancholy', name: '忧郁', emoji: '😢' },
    { id: 'joyful', name: '欢快', emoji: '😊' },
    { id: 'heroic', name: '豪迈', emoji: '💪' },
    { id: 'romantic', name: '浪漫', emoji: '💕' },
    { id: 'mysterious', name: '神秘', emoji: '🔮' }
  ]

  const instruments = [
    { id: 'pipa', name: '琵琶', icon: '🎸' },
    { id: 'erhu', name: '二胡', icon: '🎻' },
    { id: 'guzheng', name: '古筝', icon: '🎹' },
    { id: 'dizi', name: '笛子', icon: '🎵' },
    { id: 'piano', name: '钢琴', icon: '🎹' },
    { id: 'guitar', name: '吉他', icon: '🎸' }
  ]

  const handleGenerate = async () => {
    setIsGenerating(true)
    // 模拟AI生成过程
    setTimeout(() => {
      setIsGenerating(false)
    }, 3000)
  }

  return (
    <div className="min-h-screen pt-16 theme-ai">
      {/* AI京歌页面主题背景 */}
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-opera-blue/20 rounded-full blur-3xl animate-pulse-slow"></div>
        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-opera-blue/15 rounded-full blur-3xl animate-pulse-slow animation-delay-400"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-opera-blue/10 rounded-full blur-3xl animate-pulse-slow animation-delay-600"></div>
        
        {/* 京剧脸谱装饰 */}
        <div className="absolute top-20 right-20">
          <JingMaskDecoration size="large" />
        </div>
        <div className="absolute bottom-20 left-20">
          <JingMaskDecoration size="medium" />
        </div>
        
        {/* 京剧人物背景动画 */}
        <OperaBackground 
          characters={['dan', 'sheng']}
          opacity={0.2}
        />
      </div>
      
      <div className="max-w-7xl mx-auto px-4 py-8 relative z-10">
        {/* Header */}
        <motion.div
          className="text-center mb-16"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <motion.div
            className="mb-8"
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <TraditionalOrnament>
              <h1 className="text-6xl md:text-7xl font-bold jing-text-gradient mb-6 jing-title text-shadow-xl">
                AI京歌生成器
              </h1>
            </TraditionalOrnament>
            <TraditionalLine className="w-32 h-1 mx-auto mb-6 rounded-full" />
            
            {/* 装饰性图标 */}
            <div className="flex justify-center space-x-6 mb-8">
              <GuochaoIcon icon="🎵" size="medium" />
              <GuochaoIcon icon="🎭" size="medium" />
              <GuochaoIcon icon="🎨" size="medium" />
            </div>
          </motion.div>
          
          <motion.p 
            className="text-xl md:text-2xl text-white/80 max-w-4xl mx-auto leading-relaxed jing-content"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            🤖 让AI为您创作独特的京歌作品，融合传统京剧与现代音乐元素
            <br />
            🎵 智能算法理解京剧精髓，创造属于这个时代的文化新声
          </motion.p>
          
          {/* 装饰性元素 */}
          <motion.div
            className="flex justify-center items-center space-x-6 mt-8"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.6 }}
          >
            <div className="text-3xl animate-bounce-slow">🎼</div>
            <div className="text-3xl animate-float">🎭</div>
            <div className="text-3xl animate-bounce-slow animation-delay-400">🎵</div>
          </motion.div>
        </motion.div>

        <div className="grid lg:grid-cols-3 gap-8">
          {/* 创作面板 */}
          <motion.div
            className="lg:col-span-2 space-y-6"
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            {/* 输入区域 */}
            <div className="jing-card">
              <h3 className="text-2xl font-bold text-white mb-6 flex items-center">
                <Wand2 className="mr-3 text-jing-red" />
                创作灵感
              </h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-white/80 mb-2">输入您的创作想法</label>
                  <textarea
                    value={userInput}
                    onChange={(e) => setUserInput(e.target.value)}
                    placeholder="例如：我想创作一首关于春天的京歌，融合现代流行元素..."
                    className="jing-input w-full h-32 resize-none"
                  />
                </div>
                <div className="flex gap-4">
                  <button className="flex items-center space-x-2 jing-button">
                    <Mic size={18} />
                    <span>语音输入</span>
                  </button>
                  <button className="flex items-center space-x-2 glass-effect px-4 py-2 rounded-lg text-white hover:bg-white/20 transition-all">
                    <Upload size={18} />
                    <span>上传参考</span>
                  </button>
                </div>
              </div>
            </div>

            {/* 风格选择 */}
            <div className="jing-card">
              <h3 className="text-2xl font-bold text-white mb-6">音乐风格</h3>
              <div className="grid grid-cols-2 gap-4">
                {styles.map((style) => (
                  <motion.button
                    key={style.id}
                    onClick={() => setSelectedStyle(style.id)}
                    className={`p-4 rounded-lg border-2 transition-all duration-300 ${
                      selectedStyle === style.id
                        ? 'border-jing-red bg-jing-red/20'
                        : 'border-white/20 hover:border-white/40'
                    }`}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <div className={`w-8 h-8 bg-gradient-to-r ${style.color} rounded-lg mb-3`}></div>
                    <h4 className="text-white font-semibold mb-1">{style.name}</h4>
                    <p className="text-white/60 text-sm">{style.description}</p>
                  </motion.button>
                ))}
              </div>
            </div>

            {/* 情感和乐器选择 */}
            <div className="grid md:grid-cols-2 gap-6">
              <div className="jing-card">
                <h3 className="text-xl font-bold text-white mb-4">情感色彩</h3>
                <div className="space-y-2">
                  {moods.map((mood) => (
                    <button
                      key={mood.id}
                      onClick={() => setSelectedMood(mood.id)}
                      className={`w-full p-3 rounded-lg border-2 transition-all duration-300 flex items-center space-x-3 ${
                        selectedMood === mood.id
                          ? 'border-jing-red bg-jing-red/20'
                          : 'border-white/20 hover:border-white/40'
                      }`}
                    >
                      <span className="text-2xl">{mood.emoji}</span>
                      <span className="text-white">{mood.name}</span>
                    </button>
                  ))}
                </div>
              </div>

              <div className="jing-card">
                <h3 className="text-xl font-bold text-white mb-4">乐器选择</h3>
                <div className="grid grid-cols-2 gap-2">
                  {instruments.map((instrument) => (
                    <button
                      key={instrument.id}
                      onClick={() => setSelectedInstrument(instrument.id)}
                      className={`p-3 rounded-lg border-2 transition-all duration-300 flex items-center space-x-2 ${
                        selectedInstrument === instrument.id
                          ? 'border-jing-red bg-jing-red/20'
                          : 'border-white/20 hover:border-white/40'
                      }`}
                    >
                      <span className="text-lg">{instrument.icon}</span>
                      <span className="text-white text-sm">{instrument.name}</span>
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {/* 生成按钮 */}
            <motion.button
              onClick={handleGenerate}
              disabled={isGenerating}
              className={`w-full py-4 rounded-lg font-semibold text-lg transition-all duration-300 ${
                isGenerating
                  ? 'bg-white/20 text-white/50 cursor-not-allowed'
                  : 'jing-button hover:shadow-xl hover:shadow-jing-red/30'
              }`}
              whileHover={!isGenerating ? { scale: 1.02 } : {}}
              whileTap={!isGenerating ? { scale: 0.98 } : {}}
            >
              {isGenerating ? (
                <div className="flex items-center justify-center space-x-3">
                  <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                  <span>AI正在创作中...</span>
                </div>
              ) : (
                <div className="flex items-center justify-center space-x-3">
                  <Wand2 size={20} />
                  <span>生成京歌</span>
                </div>
              )}
            </motion.button>
          </motion.div>

          {/* 播放器面板 */}
          <motion.div
            className="space-y-6"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            {/* 播放器 */}
            <div className="jing-card">
              <h3 className="text-2xl font-bold text-white mb-6 flex items-center">
                <Music className="mr-3 text-jing-red" />
                播放器
              </h3>
              
              <div className="text-center mb-6">
                <div className="w-32 h-32 mx-auto mb-4 jing-gradient rounded-full flex items-center justify-center">
                  <Music size={48} className="text-white" />
                </div>
                <h4 className="text-xl font-semibold text-white mb-2">AI生成的京歌</h4>
                <p className="text-white/60">传统与现代的完美融合</p>
              </div>

              <div className="space-y-4">
                <div className="flex items-center justify-center space-x-4">
                  <button className="p-3 glass-effect rounded-full hover:bg-white/20 transition-all">
                    <Volume2 size={20} className="text-white" />
                  </button>
                  <button 
                    onClick={() => setIsPlaying(!isPlaying)}
                    className="p-4 jing-gradient rounded-full hover:scale-110 transition-all"
                  >
                    {isPlaying ? <Pause size={24} className="text-white" /> : <Play size={24} className="text-white" />}
                  </button>
                  <button className="p-3 glass-effect rounded-full hover:bg-white/20 transition-all">
                    <Settings size={20} className="text-white" />
                  </button>
                </div>

                <div className="space-y-2">
                  <div className="flex justify-between text-sm text-white/60">
                    <span>0:00</span>
                    <span>3:45</span>
                  </div>
                  <div className="w-full bg-white/20 rounded-full h-2">
                    <div className="w-1/3 h-full jing-gradient rounded-full"></div>
                  </div>
                </div>
              </div>
            </div>

            {/* 操作按钮 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">操作</h3>
              <div className="space-y-3">
                <button className="w-full flex items-center justify-center space-x-2 jing-button">
                  <Download size={18} />
                  <span>下载音频</span>
                </button>
                <button className="w-full flex items-center justify-center space-x-2 glass-effect px-4 py-3 rounded-lg text-white hover:bg-white/20 transition-all">
                  <Share2 size={18} />
                  <span>分享作品</span>
                </button>
                <button className="w-full flex items-center justify-center space-x-2 glass-effect px-4 py-3 rounded-lg text-white hover:bg-white/20 transition-all">
                  <Heart size={18} />
                  <span>收藏作品</span>
                </button>
              </div>
            </div>

            {/* 历史记录 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">创作历史</h3>
              <div className="space-y-3">
                {[1, 2, 3].map((item) => (
                  <div key={item} className="flex items-center space-x-3 p-3 glass-effect rounded-lg hover:bg-white/10 transition-all cursor-pointer">
                    <div className="w-10 h-10 jing-gradient rounded-lg flex items-center justify-center">
                      <Music size={16} className="text-white" />
                    </div>
                    <div className="flex-1">
                      <p className="text-white font-medium">京歌作品 #{item}</p>
                      <p className="text-white/60 text-sm">2分钟前</p>
                    </div>
                    <button className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all">
                      <Play size={16} className="text-white" />
                    </button>
                  </div>
                ))}
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  )
}

export default AIJingGePage
